<!-- 增加页面开始 -->

[#macro employeeAddView]
<div class="model-form">
	<el-page-header @back="goBack" content="增加员工">
	</el-page-header>
	<div class="model-content">
			<el-form ref="ruleForm" :rules="rules" :model="form" label-width="160px">
				<el-row :gutter="10">
					<el-col :span="24">
						<el-form-item label="头像" size="mini" prop="avatar">
							<avatar v-model="form.avatar"></avatar>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="姓名" size="mini" prop="name">
							<el-input v-model="form.name" name="name">
							</el-input>
						</el-form-item>

					</el-col>
					<el-col :span="12">
						<el-form-item label="职位" size="mini" prop="job">
							<el-input v-model="form.job" name="job">
							</el-input>
						</el-form-item>

					</el-col>
					<el-col :span="12">
						<el-form-item label="电话" size="mini" prop="phone">
							<el-input v-model="form.phone" name="phone">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="密码" size="mini" prop="password">
							<el-input v-model="form.password" name="password">
							</el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="数据范围" size="mini" prop="dataScope">
							<el-radio v-model="form.dataScope" label="my">本人相关</el-radio>
							<el-radio v-model="form.dataScope" label="myDepartment">本部门</el-radio>
							<el-radio v-model="form.dataScope" label="myAllDepartment">本部门及下属部门</el-radio>
							<el-radio v-model="form.dataScope" label="all">全部</el-radio>
						</el-form-item>

					</el-col>
					<el-col :span="12">
						<el-form-item label="email" size="mini" prop="email">
							<el-input v-model="form.email" name="email">
							</el-input>
						</el-form-item>

					</el-col>

					<el-col :span="12">
						<el-form-item label="所在部门" size="mini" prop="structure">
							<el-cascader style="width: 100;" filterable clearable placeholder="请选择"
								:options="orgOptions" v-model="structure" @change="selectStructure"
								:props="{ checkStrictly: true }" clearable>
							</el-cascader>
						</el-form-item>

					</el-col>
					<el-col :span="24">
						<el-form-item label="角色" size="mini" prop="selectRoles">
							<el-checkbox-group style="width: 100%;" v-model="form.selectRoles">
								<el-checkbox v-for="item in roles" :label="item.id" :key="item.id">
									{{item.name}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
						<el-button @click="goBack">取消</el-button>
						<el-button type="primary" @click="add">确定</el-button>
					</el-col>
				</el-row>
			</el-form>
	</div>
</div>
[/#macro]

[#macro employeeAddConfig]
<script type="text/x-template" id="my-employee-add">
	[@employeeAddView /]
</script>
<script type="text/javascript">
	//添加组件开始
	var employeeAddConfig = {};
	employeeAddConfig.template = "#my-employee-add";
	employeeAddConfig.methods = config.basicMethod();
	employeeAddConfig.data = function () {
		return {
			form: {
				name: '',
				phone: '',
				dataScope: 'my',
				no: '',
				email: '',
				job: '',
				org: '',
				departments: '',
				permissionType: '',
				selectRoles: []
			},
			structure:[],
			roles: [],
			rules: {
				name: [
					{ required: true, message: '请输入姓名', trigger: 'blur' }
				],
				phone: [
					{ required: true, message: '请输入电话', trigger: 'blur' }
				]
			}
		}
	};

	employeeAddConfig.computed = {};
	employeeAddConfig.computed.orgOptions = function () {
		return this.$store.state.orgOptions;
	};

	employeeAddConfig.methods.loadRoles = function () {
		var self = this;
		var param = {};
		this.postData("${siteurl}tenantRest/tenantuserrole/list.htm", param, function (res) {
			if (res.code == 0) {
				self.roles = res.list;
			}
		});
	}

	employeeAddConfig.methods.selectStructure = function (events) {
        var self = this;
        if(events.length>0){
            this.form.structure=events[events.length-1];
        }
    }


	employeeAddConfig.methods.add = function () {
		var self = this;
		this.$refs["ruleForm"].validate(function (valid) {
			if (valid) {
				self.addData();
			} else {
				console.log('error submit!!');
				return false;
			}
		});
	}

	employeeAddConfig.methods.addData = function () {
		var self = this, data = this.form;
		if (this.deforeAddData) {
			this.deforeAddData();
		}
		this.postJsonData("${siteurl}tenantRest/employee/createJson.htm", data, function (res) {
			if (res.code == 0) {
				self.$message({
					message: '添加数据成功',
					type: 'success'
				});
				self.$router.go(-1);
			} else {
				self.$message.error(res.msg);
			}
		});
	}

	employeeAddConfig.destroyed = function () {
		console.log("destroyed add view ");

	}

	employeeAddConfig.mounted = function () {
		this.loadRoles();
	}

	var employeeAddView = Vue.component('add-view', employeeAddConfig);


</script>
[/#macro]

<!-- 增加页面结束 -->